<!--suppress ALL -->
<include file="./Template/header.html" />

<link rel="stylesheet" type="text/css" href="/Template/css/activityJoin.css">
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">

	$(function() {

		//初始化页面配置
		document.title = "活动报名";

		var app = new Vue({
			el: '#container',
			data: {
				webArr: [],
			},
			methods: {
				join: function(id) {

					var name = $("input[name=name]").val();
					var contact = $("input[name=contact]").val();
					//var idcard = $("input[name=idcard]").val();
					var company = $("input[name=company]").val();

					var needInvoice = $("select[name=needInvoice]").val();
					var invoiceName = $("input[name=invoiceName]").val();
					var invoiceAddress = $("input[name=invoiceAddress]").val();

					if(isNullOrEmpty(name)) {
						alert("请填写名字");
						return false;
					}

					if(isNullOrEmpty(contact)) {
						alert("请填写联系方式");
						return false;
					}

					if(!checkPhone(contact)) {
						alert("联系方式位数不对");
						return false;
					}

//					if(isNullOrEmpty(idcard)) {
//						alert("请填写身份证号");
//						return false;
//					}
//
//					if(idcard.length != 18) {
//						alert("身份证号位数不对");
//						return false;
//					}

					if(isNullOrEmpty(company)) {
						alert("请填写单位名称");
						return false;
					}

					if(needInvoice == 1) {

						if(isNullOrEmpty(invoiceName)) {
							alert("请填写发票抬头");
							return false;
						}

						if(isNullOrEmpty(invoiceAddress)) {
							alert("请填写邮寄地址");
							return false;
						}

					}

					$.ajax({
						url:"/wechat/activity/join",
						type:"post",
						data:{
							id: id,
							name: name,
							contact: contact,
							idcard: "",
							company: company,
							needInvoice: needInvoice,
							invoiceName: invoiceName,
							invoiceAddress: invoiceAddress
						},
						dataType:"JSON",
						beforeSend:function(){
							$("#loadingToast").show();
						},
						complete:function(){
							$('#loadingToast').hide();
						},
						success:function(data){
						    if(data.code == 0){
                                alert('恭喜您报名成功')
                                window.location.href = "/wechat/userCenter/myActivity";
                            }else if(data.code != 200) {
								alert(data.msg);
								return false;
							}else{
                                app.webArr = data.webarr;
                                callpay();
							}
						},
					})
				}
			}
		})

		wx.config({
			debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
			appId: '{$appId}', // 必填，公众号的唯一标识
			timestamp: '{$config.timestamp}', // 必填，生成签名的时间戳
			nonceStr: '{$config.noncestr}', // 必填，生成签名的随机串
			signature: '{$config.signature}', // 必填，签名，见附录1
			jsApiList: ['chooseWXPay'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
		});

		wx.ready(function(){});

		function callpay(){
			if (typeof WeixinJSBridge == "undefined"){
				if( document.addEventListener ){
					alert("必须在微信中支付");
					document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
				}else if (document.attachEvent){
					alert("必须在微信中支付2");
					document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
					document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
				}
			}else{
				onBridgeReady();
			}
		};

        $(".item select").change(function() {
            var value = $(this).find("option:selected").text();
            $(this).prev().val(value);
        });

        $("select[name=needInvoice]").change(function() {
            if($(this).val() == -1) {
                $(".item.invoice").hide();
            } else {
                $(".item.invoice").show();
            }
        });

		function onBridgeReady(){
			wx.chooseWXPay({
				timestamp: app.webArr.timeStamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
				nonceStr: app.webArr.nonceStr, // 支付签名随机串，不长于 32 位
				package: app.webArr.package, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=***）
				signType: app.webArr.signType, // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
				paySign: app.webArr.paySign, // 支付签名
				success: function (res) {
					// 支付成功后的回调函数
					alert('恭喜您支付成功')
					window.location.href = "/wechat/userCenter/myActivity";
				}
			});
		}

	});


</script>

<div class="container" id="container">
	<div class="user-info">
		<div class="item">
			<span>姓名</span>
			<input type="text" value="{$join.name}" name="name" placeholder="请填写您的真实姓名">
			<img class="icon-right" src="/Template/images/icon-right.png" alt="">
		</div>
		<div class="item">
			<span>电话</span>
			<input type="text" value="{$join.contact}" name="contact" placeholder="请填写您的电话号码">
			<img class="icon-right" src="/Template/images/icon-right.png" alt="">
		</div>
		<!--<div class="item">-->
			<!--<span>身份证号</span>-->
			<!--<input type="text" value="{$join.idcard}" name="idcard" placeholder="请填写您的身份证号">-->
			<!--<img class="icon-right" src="/Template/images/icon-right.png" alt="">-->
		<!--</div>-->
		<div class="item">
			<span>单位</span>
			<input type="text" value="{$join.company}" name="company" placeholder="请填写您的单位名称">
			<img class="icon-right" src="/Template/images/icon-right.png" alt="">
		</div>
		<div class="item" v-if="{$activity.activity_pay} == 1">
			<span>是否开发票</span>
			<input type="text" value="不开发票" name="needInvoice" placeholder="请填写收货地址">
			<select name="needInvoice" class="invoice-choose">
				<option value="-1">不开发票</option>
				<option value="1">开具发票</option>
			</select>
			<img class="icon-right" src="/Template/images/icon-right.png" alt="">
		</div>
		<div class="item invoice" style="display: none;">
			<span>发票抬头</span>
			<input name="invoiceName" type="text" placeholder="请填写发票抬头">
			<img class="icon-right" src="/Template/images/icon-right.png" alt="">
		</div>
		<div class="item invoice" style="display: none;">
			<span>邮寄地址</span>
			<input name="invoiceAddress" type="text" placeholder="请输入邮寄地址">
			<img class="icon-right" src="/Template/images/icon-right.png" alt="">
		</div>
		<div class="apply-price" v-if="{$activity.activity_pay} == 1">
			<span>报名费：￥{$activity.price}</span>
		</div>
		<div class="tips" v-if="{$activity.activity_pay} == 1">
			<p>如需要取消或退费，请于活动开始前3天联系客服，<br>010-68639009</p>
		</div>
	</div>
	<div class="pay-status">
		<button class="pay-btn" v-on:click="join({$activity.activity_id})">
			<a v-if="{$activity.activity_pay} == 1"> 支付 </a>
			<a v-if="{$activity.activity_pay} != 1"> 报名 </a>
		</button>
		<div class="paying-btn">
			<a v-if="{$activity.activity_pay} == 1"> 支付 </a>
			<a v-if="{$activity.activity_pay} != 1"> 报名 </a>
		</div>
		<div class="have-paid-btn">
			<img src="/Template/images/icon-applySuccess.png" alt="报名成功">
		</div>
	</div>
</div>
<include file="./Template/footer.html" />

